<template>
    <a href="/add">信息添加</a>
    <h2>信息显示</h2>
    会员昵称
    <input type="text" v-model="query.names">
    最小年龄
    <input type="text" v-model="query.agexiao">-
    最大年龄
    <input type="text" v-model="query.ageda">
    会员等级
    <select v-model="query.dj">
                        <option value="0">请选择</option>
                        <option v-for="a in xlk" :value="a.did" >{{ a.dname}}</option>
                    </select>
    <input type="button" value="查询" @click="querys">
    <a href="https://localhost:7090/api/HY/Daoc">会员信息导出</a>
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>会员昵称</th>
                <th>会员年龄</th>
                <th>地址</th>
                <th>头像上传</th>
                <th>会员状态</th>
                <th>会员等级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-for="a in data">
            <tr>
                <th>{{a.hid}}</th>
                <th>{{a.hname}}</th>
                <th>{{a.age}}</th>
                <th>{{a.adder}}</th>
                <th>
                    <img :src="'https://localhost:7090/'+a.imgs" style="width: 60px;height: 60px;">
                </th>
                <th>{{a.hzt==1?"启用":"禁用"}}</th>
                <th>{{a.dname}}</th>
                <th>
                    <input type="button" value="修改" @click="updatt(a.hid)">
                    <input type="button" :value="a.hzt==1?'禁用':'启用'" @click="ztupda(a.hid)">
                </th>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="button" value="首页" @click="fff(1)">
        <input type="button" value="上一页" @click="fff(2)">
        <input type="button" v-for="a in fyz.pagecount" :value="a" @click="fyan(a)">
        <input type="button" value="下一页" @click="fff(3)">
        <input type="button" value="尾页" @click="fff(4)">
        页容量
        <select v-model="query.pagesize" @click="querys">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
            <option value="5">5条/页</option>
        </select>
        跳转
        <input type="text" v-model="query.pageindex">
        <input type="button" value="跳转" @click="shoow">
        共{{ fyz.pagecount }}页，当前第{{ query.pageindex }}页,每页{{ query.pagesize }}条,共{{ fyz.count }}条
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useHyzkaStore } from '@/stores/hycka';
const hycka=useHyzkaStore()
const router=useRouter()

//未登录无法显示
onMounted(()=>{
    gett()
})
const gett=()=>{
    if(hycka.data.names=="")
{
    alert('没有登录，无法进行会员操作')
    router.push({path:"/"})
}
}


//翻页按钮
const fyan=(a:any)=>{
    query.value.pageindex=a;
    shoow()
}

//状态修改
const ztupda=(val:any)=>{
    axios.get("https://localhost:7090/api/HY/Ztxg",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
        alert('用户状态修改成功')
        shoow()
    }
    else
    {
        alert('修改失败')
        return;
    }
    })
}


//修改
const updatt=(val:any)=>{
    router.push({path:"/update",query:{id:val}})
}


//上下页
const fff=(val:any)=>{
    if(val==1)
   {
    query.value.pageindex=1;
    shoow()
   }

   if(val==2)
   {
    if(query.value.pageindex>1)
   {
    query.value.pageindex-=1;
    shoow()
   }
   }

   if(val==3)
   {
    if(query.value.pageindex<fyz.value.pagecount)
   {
    query.value.pageindex+=1;
    shoow()
   }
   }

   if(val==4)
   {
    query.value.pageindex=fyz.value.pagecount;
    shoow()
   }
}


///查询

const fyz=ref({
    count:0,
    pagecount:0
})

const query=ref({
    names:"",
    agexiao:0,
    ageda:0,
    dj:0,
    pageindex:1,
    pagesize:2
})


///下拉框
const xlk=ref([{
    "did": 0,
    "dname": "",
    "djzt": 0,
    "quanyiid": 0
}])

onMounted(()=>{
    xllkk()
})
const xllkk=()=>{
    axios.get("https://localhost:7090/api/HY/Djxlk").then(res=>{
        xlk.value=res.data;
    })
}

const querys=()=>{
    query.value.pageindex=1;
    shoow()
}


const data=ref([{
    "hid": 0,
      "hname": "",
      "age": 0,
      "adder": "",
      "imgs": "",
      "hzt": 0,
      "denjiid": 0,
      "did": 0,
      "dname": ""
}])
onMounted(()=>{
    shoow()
})

const shoow=()=>{
    axios.get("https://localhost:7090/api/HY/HShow",{params:query.value}).then(res=>{
        data.value=res.data.list;
        fyz.value.count=res.data.count;
        fyz.value.pagecount=Math.ceil(fyz.value.count/query.value.pagesize);
    })
}
</script>

<style scoped>

</style>